<template>
  <el-container class="advance-query-form advance-box" style="position: relative">
    <el-aside width="350px">
      <el-card class="base-card" shadow="never">
        <div slot="header" class="base-card-header">
          <span style="color: #333333; font-weight: bold" class="header-title">模板名称</span>
          <div class="base-card-operation">
            <el-button
              class="advance-icon-btn"
              @click="refreshPjTemplateListDropdownList"
              style="width: 40px; height: 32px; padding: 0"
            >
              <img src="@/assets/img/refresh2.png" alt="" style="vertical-align: middle" />
            </el-button>
            <el-button
              class="advance-icon-btn"
              :size="defaultFormItemSize"
              style="width: 40px; height: 32px; padding: 0"
              @click="onFormCreateProjectTemplateClick()"
            >
              <img src="@/assets/img/add.png" alt="" style="vertical-align: middle" />
            </el-button>
          </div>
        </div>
        <el-scrollbar :style="{ height: getMainContextHeight - 130 + 'px' }" class="custom-scroll">
          <el-tree
            ref="selectTemplateId"
            :props="{ label: 'name' }"
            :data="ListTemplate.pjTemplateListWidget.dropdownList"
            node-key="id"
            current-node-key="id"
            :highlight-current="true"
            :default-expand-all="true"
            @node-click="onPjTemplateListValueChange"
          >
            <div class="module-node-item" slot-scope="{ data }">
              <el-row type="flex" justify="space-between" align="middle" style="margin-right: 9px">
                <!-- 使用 el-tooltip 包裹文本，并设置内容为 data.name -->
                <span class="tree-node-label" :title="data.name">{{ data.name }}</span>
                <div class="module-node-menu">
                  <el-button
                    type="text"
                    :size="defaultFormItemSize"
                    icon="el-icon-copy-document"
                    @click.stop="onFormCopyProjectTemplateClick(data)"
                  />
                  <el-button
                    type="text"
                    :size="defaultFormItemSize"
                    icon="el-icon-edit-outline"
                    @click.stop="onFormEditProjectTemplateClick(data)"
                  />
                  <el-button
                    type="text"
                    :size="defaultFormItemSize"
                    icon="el-icon-delete"
                    @click.stop="onFormDeleteProjectTemplateClick(data)"
                  />
                  <el-button
                    type="text"
                    :size="defaultFormItemSize"
                    :icon="data.isDefault === 1 ? 'el-icon-success' : 'el-icon-circle-check'"
                    @click.stop="onSetDefaultProjectTemplateClick(data)"
                  />
                </div>
              </el-row>
            </div>
          </el-tree>
        </el-scrollbar>
      </el-card>
    </el-aside>
    <el-main class="page-box" style="padding-left: 15px; display: flex">
      <table-box
        ref="layerList"
        class="page-table"
        :data="ListTemplate.layerListWidget.dataList"
        :size="defaultFormItemSize"
        :show-border="true"
        :row-config="{ isCurrent: false, isHover: true }"
        :seq-config="{
          startIndex:
            (ListTemplate.layerListWidget.currentPage - 1) * ListTemplate.layerListWidget.pageSize
        }"
        :sort-config="{ remote: true }"
        :hasExtend="true"
        @sort-change="ListTemplate.layerListWidget.onSortChange"
        @refresh="ListTemplate.layerListWidget.refreshTable()"
        @change="onLayerListSelectionChange"
      >
        <!--        <el-button-->
        <!--          slot="operator"-->
        <!--          type="primary"-->
        <!--          :size="defaultFormItemSize"-->
        <!--          :disabled="!checkPermCodeExist('ListTemplate:ListTemplate:formCreateLayerDefine')"-->
        <!--          @click="onFormCreateLayerDefineClick()"-->
        <!--        >-->
        <!--          新建-->
        <!--        </el-button>-->
        <el-button
          slot="operator"
          type="primary"
          :size="defaultFormItemSize"
          :disabled="
            ListTemplate.layerListBatchSelectRows.length <= 0 ||
            !checkPermCodeExist('ListTemplate:ListTemplate:batchDelete')
          "
          @click="onBatchDeleteClick()"
        >
          批量删除
        </el-button>
        <el-button
          slot="operator"
          type="primary"
          :size="defaultFormItemSize"
          @click="onImportMDBClick"
        >
          导入MDB
        </el-button>
        <el-upload
          ref="mdbUpload"
          class="btn-import"
          :auto-upload="false"
          action=""
          :show-file-list="false"
          accept=".mdb"
          style="display: none"
          :on-change="onImportClick"
        >
        </el-upload>

        <vxe-column fixed="left" type="checkbox" :width="40" />
        <vxe-column
          title="序号"
          fixed="left"
          type="seq"
          :index="ListTemplate.layerListWidget.getTableIndex"
          :width="80"
        />

        <vxe-column type="expand" width="40">
          <template #content="{ row }" >
            <div style="padding: 12px"
                 v-if="row.layerType === 'guandian'">
              <el-descriptions
                class="myel-description"
                :column="3"
                size="mini"
                border
                labelClassName="myel-label"
                content-class-name="myel-content"
              >
                <el-descriptions-item label="管种字段： ">
                  <el-input
                    v-if="$refs.layerList.isRowEditing(row)"
                    v-model="row.pipeTypeField"
                    size="mini"
                    @focus="onCellFocus(row)"
                  />
                  <span v-else>{{ row.pipeTypeField }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="管点类型字段： ">
                  <template>
                    <el-input
                      v-if="$refs.layerList.isRowEditing(row)"
                      v-model="row.dianCategoryField"
                      size="mini"
                    />
                    <span v-else>{{ row.dianCategoryField }}</span>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="是否支持图片： ">
                  <template>
                    <el-switch
                      v-if="$refs.layerList.isRowEditing(row)"
                      v-model="row.supportImage"
                      :size="defaultFormItemSize"
                    />
                    <span v-else>{{ row.supportImage ? '是' : '否' }}</span>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="图片数量： ">
                  <template>
                    <el-input
                      v-if="$refs.layerList.isRowEditing(row)"
                      v-model="row.imageNumbers"
                      size="mini"
                      @focus="onCellFocus(row)"
                    />
                    <span v-else>{{ row.imageNumbers }}</span>
                  </template>
                </el-descriptions-item>
              </el-descriptions>
            </div>
            <div style="padding: 12px"
                 v-if="row.layerType === 'guanxian'">
              <el-descriptions
                class="myel-description"
                :column="3"
                size="mini"
                border
                labelClassName="myel-label"
                content-class-name="myel-content"
              >
                <el-descriptions-item label="管种字段： ">
                  <el-input
                    v-if="$refs.layerList.isRowEditing(row)"
                    v-model="row.pipeTypeField"
                    size="mini"
                    @focus="onCellFocus(row)"
                  />
                  <span v-else>{{ row.pipeTypeField }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="流向字段： ">
                  <template>
                    <el-input
                      v-if="$refs.layerList.isRowEditing(row)"
                      v-model="row.flowDirectionField"
                      size="mini"
                      @focus="onCellFocus(row)"
                    />
                    <span v-else>{{ row.flowDirectionField }}</span>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="是否支持图片： ">
                  <template>
                    <el-switch
                      v-if="$refs.layerList.isRowEditing(row)"
                      v-model="row.supportImage"
                      :size="defaultFormItemSize"
                    />
                    <span v-else>{{ row.supportImage ? '是' : '否' }}</span>
                  </template>
                </el-descriptions-item>
                <el-descriptions-item label="图片数量： ">
                  <template>
                    <el-input
                      v-if="$refs.layerList.isRowEditing(row)"
                      v-model="row.imageNumbers"
                      size="mini"
                      @focus="onCellFocus(row)"
                    />
                    <span v-else>{{ row.imageNumbers }}</span>
                  </template>
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </template>
        </vxe-column>
        <vxe-column title="数据库表名" field="tableName" :width="150" />
        <vxe-column title="图层显示名称" field="displayName">
          <template slot-scope="scope">
            <el-input
              v-if="$refs.layerList.isRowEditing(scope.row)"
              v-model="scope.row.displayName"
              size="mini"
              @focus="onCellFocus(scope.row)"
            />
            <span v-else>{{ scope.row.displayName }}</span>
          </template>
        </vxe-column>
        <vxe-column title="图层类型" field="layerType">
          <template slot-scope="scope">
            <el-select
              v-if="$refs.layerList.isRowEditing(scope.row)"
              :size="defaultFormItemSize"
              v-model="scope.row.layerType"
              placeholder=""
              :clearable="true"
              :filterable="true"
              @visible-change="layerTypeOptionsWidget.onVisibleChange"
            >
              <el-option
                v-for="item in layerTypeOptionsWidget.dropdownList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <span v-else>{{ scope.row.layerType }}</span>
          </template>
        </vxe-column>
        <vxe-column
          type="html"
          title="<span class=green title='对应表中逻辑上的主键（不一定是物理主键）'>逻辑主键</span>"
          field="primaryKey"
        >
          <template slot-scope="scope">
            <el-input
              v-if="$refs.layerList.isRowEditing(scope.row)"
              v-model="scope.row.primaryKey"
              size="mini"
              @focus="onCellFocus(scope.row)"
            />
            <span v-else>{{ scope.row.primaryKey }}</span>
          </template>
        </vxe-column>
        <vxe-column title="对应管点（线）表" field="relatedTable">
          <template slot-scope="scope">
            <el-input
              v-if="$refs.layerList.isRowEditing(scope.row)"
              v-model="scope.row.relatedTable"
              size="mini"
              @focus="onCellFocus(scope.row)"
            />
            <span v-else>{{ scope.row.relatedTable }}</span>
          </template>
        </vxe-column>
        <inline-auto-save-column
          v-if="ListTemplate.layerListInline.supportAutoNext"
          @save="row => onSaveLayerListInlineRow(row, true)"
        />
        <vxe-column title="操作" fixed="right">
          <template slot-scope="scope">
            <template v-if="!$refs.layerList.isRowEditing(scope.row)">
              <el-button
                type="text"
                :size="defaultFormItemSize"
                @click.stop="onEditLayerlistClick(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                @click.stop="onFormEditLayerFieldClick(scope.row)"
                type="text"
                :size="defaultFormItemSize"
                :disabled="!checkPermCodeExist('ListTemplate:ListTemplate:formEditLayerDefine')"
              >
                字段管理
              </el-button>
              <el-button
                type="text"
                :size="defaultFormItemSize"
                @click.stop="onDeleteClick(scope.row)"
                :disabled="!checkPermCodeExist('ListTemplate:ListTemplate:delete')"
              >
                删除
              </el-button>
            </template>
            <template v-else>
              <el-button
                type="text"
                :size="defaultFormItemSize"
                key="layerListSaveTable"
                @click.stop="onSaveRowClick(scope.row, false)"
              >
                保存
              </el-button>
              <el-button
                type="text"
                key="layerListCancelTable"
                :size="defaultFormItemSize"
                @click.stop="onCancelLayerListInlineRow(scope.row)"
              >
                取消
              </el-button>
            </template>
          </template>
        </vxe-column>
        <template slot="empty">
          <div class="table-empty unified-font">
            <img src="@/assets/img/empty.png" />
            <span>暂无数据</span>
          </div>
        </template>
      </table-box>
      <label v-if="subPage" class="page-close-box" @click="onCancel(true)">
        <img src="@/assets/img/back2.png" alt="" />
      </label>
    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex';
import rules from '@/utils/validate';
import {
  stringCase,
  treeDataTranslate,
  findItemFromList,
  findTreeNodePath,
  findTreeNode
} from '@/utils';
import { uploadMixin, statsDateRangeMixin, cachePageMixin } from '@/core/mixins';
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
import EditLayerDefine from '@/views/formTemplateMng/editLayerDefine.vue';
// import EditLayerTemplate from '@/views/formTemplateMng/editLayerTemplate.vue';
import CopyProjectTemplate from '@/views/formTemplateMng/copyProjectTemplate.vue';
import EditProjectTemplate from '@/views/formTemplateMng/editProjectTemplate.vue';
import { LayerDefineController, ProjectTemplateController, DictionaryController } from '@/api';
import importMdbTables from '@/views/formTemplateMng/importMdbTables.vue';

export default {
  name: 'ListTemplate',
  props: {
    subPage: {
      type: [Number, String, Boolean],
      default: 0
    }
  },
  mixins: [uploadMixin, statsDateRangeMixin, cachePageMixin],
  data() {
    return {
      formData: {
        ProjectTemplate: {
          // 模板ID
          id: undefined,
          // 模板名称
          name: undefined,
          // 模板描述
          description: undefined,
          // 是否默认
          isDefault: undefined,
          isDatasourceInit: false
        }
      },
      formFilter: {
        selectTemplateId: undefined
      },
      formFilterCopy: {
        selectTemplateId: -1
      },
      layerTypeOptionsWidget: new DropdownWidget(this.loadLayerTypeDropdownList),
      ListTemplate: {
        // 项目模板数据源批量删除或者批量更新选中数据
        layerListBatchSelectRows: [],
        // 项目模板数据源组件
        layerListWidget: new TableWidget(
          this.loadLayerListWidgetData,
          this.loadLayerListVerify,
          false,
          false,
          'displayOrder',
          true
        ),
        layerListInline: {
          // 行内编辑校验规则
          inlineRules: {},
          // 是否支持自动编辑下一行
          supportAutoNext: false
        },
        // 模板名称组件
        pjTemplateListWidget: new DropdownWidget(
          this.loadPjTemplateListDropdownList,
          true,
          'id',
          'parentId'
        ),
        isInit: false
      }
    };
  },
  methods: {
    onCancel(isSuccess) {
      this.removeCachePage(this.$options.name);
      this.refreshParentCachedPage = isSuccess;
      this.$router.go(-1);
    },
    onEditLayerlistClick(row) {
      if (row == null) return;
      this.$refs.layerList.editRow(row, false);
    },
    // 添加单元格聚焦处理方法
    onCellFocus(row) {
      // 可以在这里添加选中行的提示
      this.$message.info('您正在编辑行数据，请完成后点击保存');
    },
    onCancelLayerListInlineRow(row, deleteRow = true) {
      if (this.$refs.layerList != null) {
        this.$refs.layerList.cancelEditRow(deleteRow);
      }
    },
    onSaveLayerListInlineRow(row, autoEditNext) {
      console.log('Row', row);
      if (this.$refs.layerList != null) {
        console.log('autoEditNext', autoEditNext);
        this.$refs.layerList.editRow(row, autoEditNext);
        this.$refs.layerList
          .saveRow(autoEditNext)
          .then(res => {
            let { rowData, nextRow, isNew, isDirty } = res;
            console.log('res', res);
            let params = {
              projectTemplateDto: {
                ...rowData
              }
            };
            if (!isNew) {
              // 保存数据
              if (!isDirty) {
                // 未修改数据
                if (autoEditNext) {
                  if (nextRow == null) {
                    nextRow = this.ListTemplate.layerListWidget.dataList[0];
                  }
                  this.onEditLayerlistClick(nextRow);
                } else {
                  this.onCancelLayerListInlineRow(row);
                }
              } else {
                // 行数据已经修改
                ProjectTemplateController.update(this, params)
                  .then(res => {
                    this.$message.success('保存成功');
                    this.ListTemplate.layerListWidget.refreshTable(false);
                  })
                  .catch(e => {});
              }
            }
          })
          .catch(e => {
            if (e != null) {
              if (e != null && e.message != null && e.message !== '') {
                let firstField = 'layerList' + stringCase(e.message, 1);
                if (this.$refs[firstField] && this.$refs[firstField].focus)
                  this.$refs[firstField].focus();
              }
            }
          });
      }
    },
    /**
     * 模板名称下拉数据获取函数
     */
    loadLayerTypeDropdownList() {
      return new Promise((resolve, reject) => {
        const params = {
          dictCode: 'LayerType'
        };
        DictionaryController.dictGlobalDict(this, params)
          .then(res => {
            resolve(res.getList());
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    // 可以添加取消编辑的方法（可选）
    onCancelEditRow(row) {
      // 恢复原始数据
      Object.assign(row, row.originalData);
      // 退出编辑状态
      this.$set(row, 'isEditing', false);
    },
    // 添加保存行数据方法
    onSaveRowClick(row) {
      // 调用API保存数据
      let params = {
        layerDefineDto: {
          id: row.id,
          projectTemplateId: row.projectTemplateId,
          tableName: row.tableName,
          mdbTableName: row.tableName,
          displayName: row.displayName,
          layerType: row.layerType,
          primaryKey: row.primaryKey,
          relatedTable: row.relatedTable,
          supportImage: row.supportImage,
          imageNumbers: row.imageNumbers,
          dianCategoryField: row.dianCategoryField,
          pipeTypeField: row.pipeTypeField,
          flowDirectionField: row.flowDirectionField
          // displayStyle: row.displayStyle,
          // displayOrder: row.displayOrder,
          // isVisible: row.isVisible,
          // styleConfig: row.styleConfig
        }
      };

      LayerDefineController.update(this, params)
        .then(res => {
          this.$message.success('保存成功');
          // 退出编辑状态
          // this.$set(row, 'isEditing', false);
          // 更新表格数据
          this.ListTemplate.layerListWidget.refreshTable();
        })
        .catch(e => {
          this.$message.error('保存失败');
        });
    },
    showImportMDB(data) {
      let params = {
        projectTemplateId: this.formFilter.selectTemplateId,
        mdbMetaData: data
      };
      let width = Math.floor(this.getClientWidth * 0.8) + 'px';
      let height = Math.floor(this.getClientHeight * 0.9) + 'px';
      this.$dialog
        .show('导入模板（MDB表）', importMdbTables, { area: [width, height] }, params)
        .then(res => {
          this.ListTemplate.layerListWidget.refreshTable();
        })
        .catch(() => {
          console.log('cancel');
        });
    },
    /**
     * 导入MDB按钮点击事件 - 先显示提醒对话框
     */
    onImportMDBClick() {
      if (!this.formFilter.selectTemplateId) {
        this.$message.error('请先选择模板');
        return;
      }

      // Check是否已经被关联，被关联的模板不允许导入MDB文件。
      // 显示提醒对话框
      // this.$alert('导入MDB文件将覆盖当前模板的图层定义，是否继续？', '导入提醒', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning',
      //   showCancelButton: true,
      //   dangerouslyUseHTMLString: true,
      //   callback: (action) => {
      //     if (action === 'confirm') {
      // 用户点击确定后，触发文件选择
      this.$refs.mdbUpload.$el.querySelector('input').click();
      //     }
      //   }
      // });
    },
    /**
     * 导入
     */
    onImportClick(file) {
      let params = {
        file: file.raw
      };

      ProjectTemplateController.parseMdbDatabase(this, params)
        .then(res => {
          this.$message.success('导入成功');
          this.showImportMDB(res.data);
        })
        .catch(e => {});
    },
    refreshPjTemplateListDropdownList() {
      this.ListTemplate.pjTemplateListWidget.reloadDropdownData().then(dataList => {
        if (
          !Array.isArray(dataList) ||
          dataList.find(item => item.id === this.formFilter.selectTemplateId) == null
        ) {
          this.formFilter.selectTemplateId = undefined;
          this.formFilterCopy.selectTemplateId = -1;
        }
        this.$refs.selectTemplateId.setCurrentKey(this.formFilter.selectTemplateId);
      });
    },
    onFormCreateProjectTemplateClick() {
      this.$dialog
        .show('添加', EditProjectTemplate, { area: '500px' }, {})
        .then(res => {
          this.refreshPjTemplateListDropdownList();
        })
        .catch(() => {
          console.log('cancel');
        });
    },
    onFormCopyProjectTemplateClick(data) {
      let params = {
        id: data.id
      };
      this.$dialog
        .show('复制模板', CopyProjectTemplate, { area: '500px' }, params)
        .then(res => {
          this.refreshPjTemplateListDropdownList();
        })
        .catch(() => {
          console.log('cancel');
        });
    },
    onFormEditProjectTemplateClick(data) {
      let params = {
        id: data.id
      };
      this.$dialog
        .show('编辑', EditProjectTemplate, { area: '500px' }, params)
        .then(res => {
          this.refreshPjTemplateListDropdownList();
        })
        .catch(() => {
          console.log('cancel');
        });
    },
    onFormDeleteProjectTemplateClick(data) {
      let params = {
        id: data.id
      };
      this.$confirm('是否删除选中数据？')
        .then(res => {
          return ProjectTemplateController.delete(this, params)
            .then(res => {
              this.$message.success('删除成功');
              this.refreshPjTemplateListDropdownList();
            })
            .catch(e => {});
        })
        .catch(() => {});
    },
    onSetDefaultProjectTemplateClick(data) {
      console.log('onSetDefaultProjectTemplateClick', data);
      let params = {
        id: data.id
      };
      if (data.isDefault === 0) {
        this.$confirm('是否设置为默认模板？')
          .then(res => {
            return ProjectTemplateController.setDefault(this, params)
              .then(res => {
                this.$message.success('设置成功');
                this.refreshPjTemplateListDropdownList();
              })
              .catch(e => {});
          })
          .catch(e => {});
      }
    },
    /**
     * 项目模板数据源数据获取函数，返回Promise
     */
    loadLayerListWidgetData(params) {
      if (params == null) params = {};
      params = {
        ...params,
        layerDefineDtoFilter: {
          projectTemplateId: this.formFilterCopy.selectTemplateId
        }
      };
      return new Promise((resolve, reject) => {
        LayerDefineController.list(this, params)
          .then(res => {
            resolve({
              dataList: res.data.dataList,
              totalCount: res.data.totalCount
            });
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    /**
     * 项目模板数据源数据获取检测函数，返回true正常获取数据，返回false停止获取数据
     */
    loadLayerListVerify() {
      this.formFilterCopy.selectTemplateId = this.formFilter.selectTemplateId;
      return true;
    },
    /**
     * 项目模板数据源表格批量操作
     */
    onLayerListSelectionChange(values) {
      this.ListTemplate.layerListBatchSelectRows = values || [];
    },
    /**
     * 新建
     */
    onFormCreateLayerDefineClick(row) {
      let params = {
        projectTemplateId: this.formFilter.selectTemplateId
      };

      if (!params.projectTemplateId) {
        this.$message.error('请先选择模板');
        return;
      }

      this.$dialog
        .show(
          '新建',
          EditLayerDefine,
          { area: '900px', offset: '100px' },
          { ...params, subPage: true }
        )
        .then(res => {
          this.ListTemplate.layerListWidget.refreshTable();
        })
        .catch(e => {});
    },
    /**
     * 编辑图层字段按钮
     */
    onFormEditLayerFieldClick(row) {
      let params = {
        layerId: row.id,
        templateName: row.displayName
      };
      this.$router.push({
        name: 'editLayerField',
        query: params
      });
    },
    /**
     * 编辑图层定义数据源
     */
    onFormEditLayerDefineClick(row) {
      let params = {
        id: row.id,
        projectTemplateId: row.projectTemplateId
      };

      this.$dialog
        .show('编辑', EditLayerDefine, { area: '900px' }, { ...params, subPage: true })
        .then(res => {
          this.ListTemplate.layerListWidget.refreshTable();
        })
        .catch(e => {});
    },
    /**
     * 删除
     */
    onDeleteClick(row) {
      let params = {
        id: row.id
      };

      this.$confirm('是否删除选中数据？')
        .then(res => {
          ProjectTemplateController.delete(this, params)
            .then(res => {
              this.$message.success('删除成功');
              this.ListTemplate.layerListWidget.refreshTable(false, 1);
            })
            .catch(e => {});
        })
        .catch(e => {});
    },
    /**
     * 批量删除
     */
    onBatchDeleteClick(row) {
      let params = {};

      this.$confirm('是否删除选中数据？')
        .then(res => {
          params.idList = this.ListTemplate.layerListBatchSelectRows.map(item => item.id);
          LayerDefineController.deleteBatch(this, params)
            .then(res => {
              this.$message.success('删除成功');
              this.ListTemplate.layerListBatchSelectRows = [];
              this.ListTemplate.layerListWidget.refreshTable(true, 1);
            })
            .catch(e => {});
        })
        .catch(e => {});
    },
    /**
     * 模板名称下拉数据获取函数
     */
    loadPjTemplateListDropdownList() {
      return new Promise((resolve, reject) => {
        const params = {};
        DictionaryController.dictProjectTemplate(this, params)
          .then(res => {
            resolve(res.getList());
          })
          .catch(e => {
            reject(e);
          });
      });
    },
    /**
     * 模板名称选中值改变
     */
    onPjTemplateListValueChange(value) {
      if (value.id !== this.formFilter.selectTemplateId) {
        this.formFilter.selectTemplateId = value.id;
      } else {
        this.formFilter.selectTemplateId = undefined;
        this.$nextTick(() => {
          this.$refs.selectTemplateId.setCurrentKey(null);
        });
      }
      this.refreshListTemplate(true);
    },
    refreshListTemplate(reloadData = false) {
      this.ListTemplate.layerListWidget.refreshTable(reloadData, reloadData ? 1 : undefined);
    },
    /**
     * 重置过滤值
     */
    resetListTemplate() {
      this.formFilter.selectTemplateId = undefined;
      this.formFilterCopy.selectTemplateId = -1;
      this.refreshListTemplate();
    },
    /**
     * 重置所有过滤值
     */
    resetFilter() {
      this.resetListTemplate();
    },
    onResume() {
      this.refreshListTemplate();
    },
    formInit() {
      this.ListTemplate.pjTemplateListWidget.onVisibleChange(true).catch(e => {});
      this.refreshListTemplate();
    }
  },
  mounted() {
    // 初始化页面数据
    this.formInit();
  },
  computed: {
    ...mapGetters(['getMainContextHeight', 'getClientHeight', 'getClientWidth'])
  }
};
</script>

<style scoped>
::v-deep .el-tree-node__content {
  height: 35px;
}
.module-node-item {
  width: 100%;
  height: 35px;
  line-height: 35px;
}
/* 为所有 .el-tree-node__content 元素设置 border-top */
::v-deep .el-tree-node {
  border-bottom: solid #00f8f8 1px;
  border-radius: 0;
}

/* 为最后一个节点的 .el-tree-node__content 设置额外的 border-bottom */
/* 方法1：使用 :last-child 选择器 */
::v-deep .el-tree-node:first-child {
  border-top: solid #00f8f8 1px;
}

/* 关键样式：处理文本溢出 */
.tree-node-label {
  display: inline-block; /* 必须是块级或行内块级元素才能设置宽度和溢出 */
  max-width: 180px; /* 根据你的布局需要设置最大宽度 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 溢出部分显示省略号 */
  white-space: nowrap; /* 强制文本在一行内显示，不换行 */
  /* 可选：添加一些内边距或外边距 */
  /* padding-right: 5px; */
}

::v-deep .myel-label {
  background: #e1f3d8 !important;
  width: 100px !important;
  text-align: right !important;
}
::v-deep .myel-content {
  width: 20% !important;
  max-width: 30% !important;
  text-align: left !important;
}
.myel-description {
  margin-right: 30px;
  margin-left: 30px;
}
</style>
